<template>
  <div class="Page-discover">
    <el-menu :default-active="active" class="header-nav-menu" mode="horizontal" :router="true">
      <el-menu-item
        v-for="(item, index) in navData"
        :key="index"
        :disabled="item.meta.disabled"
        :index="item.path"
        :route="{name:item.name}"
      >{{item.meta.title}}</el-menu-item>
    </el-menu>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import Tool from '@/plug-in/Tool';

export default {
  data() {
    let routes = Tool.getRoutes(this, 'discover');
    routes = routes.children || [];
    const index = routes.map((it) => it.name).lastIndexOf(this.$route.name);
    return {
      active: this.$route.path,
      navData: routes
    };
  },
  watch: {
    $route(route) {
      let active = route.path;
      if (route.matched.length > 2) {
        // 判断是否多级路由，模糊匹配
        active = route.matched[1].path;
      }
      this.active = active;
    }
  }
};
</script>

<style lang="scss" scoped>
.Page-discover {
  & > .header-nav-menu {
    display: flex;
    justify-content: center;
    & > .el-menu-item {
      padding: 0 30px;
      height: 45px;
      line-height: 45px;
    }
  }
}
</style>
